<template>
   <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    @cancel="handleCancel"
   >

    <div>
      <p style="font-size: 16px;">{{hosturl}}</p>
    </div>

    <template slot="footer">
      <a-button @click="handleCancel" >{{$t('关闭')}}</a-button>
      <a-button @click="copy" style="background-color:#F96455;color:#ffffff;">{{$t('复制')}}</a-button>
    </template>
  </a-modal>

</template>

<script>

  export default {
    name: 'ShopShareModal',
    components: {
    },
    data () {
      return {
        title:'',
        width:800,
        visible: false,
        disableSubmit: false,
        hosturl:''
      }
    },
    created(){
    },
    mounted(){

    },
    methods: {
      edit(type,record){
        console.log(type,record);
        this.visible = true
        if (type===1){
          this.title = this.$t('分享链接')
          this.hosturl='http://' + window.location.host + '/?id=' + record.code
          if(this.hosturl.indexOf('sp')>0){
            this.hosturl = this.hosturl.replace('.sp',"")
          }
        }
        if (type===2){
          this.title = this.$t('通讯秘钥')
          this.hosturl= record.apiKey
        }
      },
      copy(){
        let cInput = document.createElement("input");
        cInput.value = this.hosturl;
        document.body.appendChild(cInput);
        cInput.select();
        document.execCommand("copy")
        if(document.execCommand("copy")){
          this.$message.success(this.$t('复制成功'))
        }
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      submitCallback(){
        this.$emit('ok');
        this.visible = false;
      },
      handleCancel () {
        this.close()
      }
    }
  }
</script>